<template>
  <div class="topic_outer" id="topic">
    <div class="topic_left">
      <!-- 通过上级传递来的参数来决定显示什么具体信息内容 -->
      <main v-if="chooseVedio == 0">
        <div class="topic_left_list first">未 审 核 视 频</div>
      </main>
      <main v-else-if="chooseVedio == -1">
        <div class="topic_left_list first">已 拒 绝 视 频</div>
      </main>
      <main v-else>
        <div class="topic_left_list first">已 通 过 视 频</div>
      </main>
      <div v-for="t in videoList" :key="t.id">
        <!-- 在这里遍历获得的数据信息 -->
        <div
          v-if="chooseVedio == t.status"
          class="inner size_small"
          @click="ChangeUrl(t)"
        >
          {{ t.title }}
        </div>
      </div>
    </div>

    <div class="topic_right">
      <!-- 刚进入页面会出现提示信息而不出现具体内容 -->
      <h1 v-if="!isShowVidio">单击左侧视频列表以显示对应视频</h1>
      <!-- isShowVidio改变后显示具体操作内容 同时也根据选择的chooseVedio来决定显示的内容 -->
      <div v-if="isShowVidio">
        <video :src="url" controls autoplay></video>
        <main v-if="chooseVedio == 0">
          <el-button class="btn" type="info" @click="pass">通 过</el-button>
          <el-button class="btn" type="danger" @click="refuse">拒 绝</el-button>
        </main>
        <main v-else-if="chooseVedio == -1">
          <el-button class="btn" type="info" @click="pass">通 过</el-button>
        </main>
        <main v-else>
          <el-button class="btn" type="danger" @click="refuse">拒 绝</el-button>
        </main>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Video",
  data() {
    return {
      // 暂存选择的视频数据信息
      fornowdata: {},
      // 视频数据信息列表
      videoList: [],
      // 是否展示
      isShowVidio: false,
      // 视频的url地址
      url: "",
    };
  },
  // 获取传递给子组件的属性
  props: ["chooseVedio"],
  methods: {
    ChangeUrl(c) {
      // 改变视频的url信息
      this.url = c.content;
      this.isShowVidio = true;
      this.fornowdata = c;
    },
    pass() {
      // 视频通过审核
      // 传递两个参数 title id
      let { id, title } = this.fornowdata;
      axios
        .get(
          `https://qcljo8.api.cloudendpoint.cn/changeVedioState?idx=${id}&titlex=${title}&status=1`
        )
        .then(
          (res) => {
            console.log(res.data)
            this.updateList();
            this.isShowVidio = false;
          },
          (err) => {
            console.log(err.message);
          }
        );
    },
    refuse() {
      // 视频拒绝审核
      let { id, title } = this.fornowdata;
      axios
        .get(
          `https://qcljo8.api.cloudendpoint.cn/changeVedioState?idx=${id}&titlex=${title}&status=-1`
        )
        .then(
          (res) => {
            this.updateList();
            this.isShowVidio = false;
          },
          (err) => {
            console.log(err.message);
          }
        );
    },
    updateList() {
      // 设置公用更新列表的函数
      setTimeout(() => {
        axios.get("https://qcljo8.api.cloudendpoint.cn/getVedio").then(
          (response) => {
            this.videoList = response.data;
            this.url = this.videoList[0].content;
          },
          (error) => {
            console.log(error.message);
          }
        );
      }, 500);
    },
  },
  mounted() {
    // 在挂载完毕后请求数据
    axios.get("https://qcljo8.api.cloudendpoint.cn/getVedio").then(
      (response) => {
        this.videoList = response.data;
        this.url = this.videoList[0].content;
      },
      (error) => {
        console.log(error.message);
      }
    );
  },
  watch: {
    chooseVedio: {
      // 通过监视chooseVedio的值来进行一些展示与不展示的操作
      handler(newValue, oldValue) {
        if(newValue != oldValue)
        this.isShowVidio = false;
      },
    },
  },
};
</script>

<style lang="less" scoped>
@bordercolor:rgb (170, 170, 170);
.topic_outer {
  height: 100%;
  color: white;
  .topic_left {
    width: 39.5%;
    height: 100%;
    float: left;
    .topic_left_list {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 7%;
      font-size: 20px;
      border: 1px solid rgb(170, 170, 170);
      border-top: 0px;
    }
    .inner {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 50px;
      border: 1px solid rgb(170, 170, 170);
      border-top: 0px;
    }
    .size_small {
      font-size: 16px;
    }

    .first {
      border-top: 1px solid rgb(170, 170, 170);
    }
  }

  .topic_right {
    position: fixed;
    left: 48%;
    width: 48%;
    height: 80%;
    h1 {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    video {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 60%;
      height: 80%;
    }
    .btn {
      width: 30%;
    }
  }
}
</style>